<template>
    <div class="home-page">
        <!-- 账单卡片 -->
        <div class="today-bill">
            <CountCard v-for="(type, index) in types" v-bind="type" :key="index" :decimals="2" prefix="￥">
                <template v-slot:footer>
                    <div class="today-bill-footer">
                        <span>周同比</span>
                        <span>日同比</span>
                    </div>
                </template>
            </CountCard>
        </div>
        <!-- 账单总览 -->
        <AccountOverviewChart class="account-overview"/>
        <!-- 快捷导航 -->
        <Shorcuts bodyClass="shortcuts"/>
        <!-- 资金来源 -->
        <FundSourceChart class="fund-source"/>
    </div>
</template>

<script>
import Card from './components/Card.vue';
import CountCard from './components/CountCard.vue';
import AccountOverviewChart from './components/AccountOverviewChart.vue'
import Shorcuts from './components/Shortcuts/index.vue'
import FundSourceChart from './components/FundSourceChart.vue'
export default {
    components: {
        Card,
        CountCard,
        AccountOverviewChart,
        Shorcuts,
        FundSourceChart
    },
  data() {
    return {
        types: [
            {
                title: '洗剪吹',
                value: 1000
            },
            {
                title: '烫染',
                value: 0,
                bgColor: 'pink'
            },
            {
                title: '头发护理',
                value: 0,
                bgColor: 'lightgreen'
            },
            {
                title: '头发护理',
                value: 0,
                bgColor: 'lightblue'
            }
        ]
    }
  },
  computed: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.home-page{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    grid-template-rows: repeat(4, 1fr);
    position: absolute;
    padding: 12px;
    width: 100%;
    height: 100%;
    .today-bill{
        grid-column: span 3;
        display: flex;
        gap: 12px;
        width: 100%;
        &>div{
            flex: 1;
        }
        &-footer{
            display: flex;
            justify-content: space-between;
        }
    }
    .account-overview{
        grid-column: span 2;
        grid-row: span 3;
    }
    .fund-source{
        grid-column: span 1;
        grid-row: span 2;
    }
}
</style>